<template>
  <div class="basic-detail">
    <a-form-model :model="form" v-bind="layout" ref="form">
      <a-form-model-item label="标题" prop="title" required>
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="商品描述" prop="desc">
        <a-input v-model="form.desc" />
      </a-form-model-item>
      <a-form-model-item label="商品类目" prop="category" required>
        <a-select
          v-model="form.category"
          placeholder="请选择商品类别"
          @change="changeCategory"
        >
          <a-select-option v-for="c in categoryList" :key="c.id" :value="c.id">
            {{ c.name }}
          </a-select-option>
        </a-select>
        <a-select
          v-model="form.c_item"
          placeholder="请选择子类别"
          :disabled="categoryItems.length == 0"
        >
          <a-select-option v-for="c in categoryItems" :key="c" :value="c">
            {{ c }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="商品标签" prop="tags" required>
        <a-select
          v-model="form.tags"
          mode="tags"
          placeholder="请选择标签"
          :default-value="['包邮，最晚次日达']"
        >
          <a-select-option value="包邮，最晚次日达">
            包邮，最晚次日达
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import getList from '@/api/category';

export default {
  data() {
    return {
      form: {
        title: '',
        desc: '',
        category: [],
        c_item: [],
        tags: [],
      },
      categoryList: [],
      categoryItems: [],
      layout: {
        labelCol: { span: 4, offset: 2 },
        wrapperCol: { span: 12 },
      },
    };
  },
  async created() {
    const res = await getList();
    this.categoryList = res.data;
  },
  methods: {
    changeCategory(e) {
      const itemC = this.categoryList.find((c) => c.id === e);
      if (itemC) this.categoryItems = itemC.c_items;
    },
    validate(fn) {
      this.$refs.form.validate(fn);
    },
    init(data) {
      const { title, desc, category, c_item, tags } = data;
      this.form = {
        title,
        desc,
        category,
        c_item: [c_item],
        tags,
      };
      this.categoryItems = this.categoryList.find(
        (c) => c.id === category,
      ).c_items;
    },
    reset() {
      this.$refs.form.resetFields();
      this.categoryItems = [];
      this.form.c_item = [];
    },
  },
};
</script>

<style lang="less" scoped>
.basic-detail {
  width: 600px;
}
</style>
